{% extends "layout.html" %}
{% block css %}
    <link rel="stylesheet" href="{{url_for('static', filename='css/login.css')}}">
{% endblock %}
{% block content %}
<div class="form-content row justify-content-center">
    <div class="col-sm-8 jumbotron">
        <h4>欢迎注册</h4>
        <form action="/auth/register" method="post">
            {{form.hidden_tag()}}
            <!--用户名-->
            <div class="form-group row">
                {{form.username.label(class="col-sm-2 col-form-label")}}
                <div class="col-sm-9">
                    {% if get_flashed_messages()[0] and get_flashed_messages()[0].username and get_flashed_messages()[0].username[0] %}
                        {{form.username(class="form-control  is-invalid")}}
                        <div class="invalid-feedback">
                            {{get_flashed_messages()[0].username[0]}}
                        </div>
                    {% else %}
                        {{form.username(class="form-control")}}
                    {% endif %}
                </div>
            </div>
            <!--邮箱地址-->
            <div class="form-group row">
                {{form.email.label(class="col-sm-2 col-form-label")}}
                <div class="col-sm-9">
                    {% if get_flashed_messages()[0] and get_flashed_messages()[0].email and get_flashed_messages()[0].email[0] %}
                        {{form.email(class="form-control is-invalid")}}
                        <div class="invalid-feedback">
                            {{get_flashed_messages()[0].email[0]}}
                        </div>
                    {% else %}
                        {{form.email(class="form-control")}}
                    {% endif %}
                </div>
            </div>
            <!--密码-->
            <div class="form-group row">
                {{form.password.label(class="col-sm-2 col-form-label")}}
                <div class="col-sm-9">
                    {% if get_flashed_messages()[0] and get_flashed_messages()[0].password and get_flashed_messages()[0].password[0] %}
                        {{form.password(class="form-control is-invalid")}}
                        <div class="invalid-feedback">
                            {{get_flashed_messages()[0].password[0]}}
                        </div>
                    {% else %}
                        {{form.password(class="form-control")}}
                    {% endif %}

                </div>
            </div>
            <!--确认密码-->
            <div class="form-group row">
                {{form.confirmPassword.label(class="col-sm-2 col-form-label")}}
                <div class="col-sm-9">
                    {% if get_flashed_messages()[0] and get_flashed_messages()[0].confirmPassword and get_flashed_messages()[0].confirmPassword[0] %}
                        {{form.confirmPassword(class="form-control is-invalid")}}
                        <div class="invalid-feedback">
                            {{get_flashed_messages()[0].confirmPassword[0]}}
                        </div>
                    {% else %}
                        {{form.confirmPassword(class="form-control")}}
                    {% endif %}
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-9 offset-sm-2">
                    {{form.submit(class="btn btn-primary")}}
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}